<template>
  <div class="w-full">
    <div class="h-[242px] px-10 py-8 bg-no-repeat bg-cover bg-center mb-6 w-full" :style="`background-image: url(${version_bg})`">
      <div class="text-custom-text text-[20px] font-[600] leading-[28px] mb-2">智慧学习考核系统</div>
      <div class="text-custom-text-45 font-[400] leading-[22px] mb-4">
        <span>智慧学习考核 1.0</span>
        <el-divider direction="vertical" />
        <span>1.2G</span>
        <el-divider direction="vertical" />
        <span>2024-12-30</span>
      </div>
      <div class="text-custom-text-65 text-[16px] leading-[24px] mb-6 w-2/3">
        为满足江苏省建筑行业人员的继续教育需求，加强建筑施工安全生产管理，提高建筑行业学生及从业人员的安全意识和技能水平，江苏省建筑协会建立了此教育培训平台，方便建筑施工企业及相关人员进行在线学习、考试等操作
      </div>
      <el-button type="primary" :icon="Download">下载最新版本</el-button>
    </div>
    <div class="p-6 bg-white rounded-[6px]">
      <div class="bg-white w-full rounded-[6px] mb-6">
        <span :class="activeName === '2022' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('2022')">2022</span>
        <span :class="activeName === '2023' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('2023')">2023</span>
        <span :class="activeName === '2024' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('2024')">2024</span>
      </div>
      <div>
        <div class="before:content-[' ']
              before:inline-block
              before:w-1 before:h-4
              rounded-[1px]
              before:bg-[#33A0FF] before:bg-gradient-to-b from-[#9DD1FF] to-[#33A0FF]
              before:mr-2 text-[20px] font-[500] leading-7 text-custom-text
              flex items-center mb-6">{{ activeName }}版本
        </div>
        <div>
          <el-table
              ref="multipleTableRef"
              :data="tableData"
              :show-header="false"
              style="width: 100%"
          >
            <el-table-column type="expand">
              <template #default="props">
                <div class="flex mx-4 my-4">
                  <div class="w-[100px] text-custom-text-45 leading-[22px]">
                    版本描述：
                  </div>
                  <div class="text-custom-text-65 leading-[22px]">
                    主要面向江苏省建筑行业学生及从业人员，包括项目测量员、管理人员、安全员、特种作业人员、一线从业人员等，同时也适用于建筑安全生产监管机构及其人员以及其他建筑业相关企业及其人员
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="name" class-name="column-name"/>
            <el-table-column property="time" class-name="column-time" width="200px" align="right">
              <template #default="scope">
                <div class="flex items-center">
                  <img class="mr-[6px]" src="@/assets/images/calendar-check-line.png" alt="">
                  <span>{{scope.row.time}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column property="time" class-name="column-action" width="150px" align="right">
              <template #default="scope">
                <el-button type="primary" text>
                  <img class="mr-[6px]" src="@/assets/images/download.png" alt="">下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import version_bg from '@/assets/images/version_bg.png'
import {Download, Search} from '@element-plus/icons-vue'
import {ref} from "vue";
const activeName = ref('2022')
const tableData = ref([
  {
    id: '1',
    name: '智慧学习 2024 5.0',
    time: '2024-10-16 12:12'
  },
  {
    id: '2',
    name: '加入班期XXXX',
    time: '2024-10-16 12:12'
  }
])
const changeTabs = (type) => {
  activeName.value = type
}
</script>
<style scoped lang="scss">
:deep(.column-name) {
  padding: 20px 0;
  .cell{
    color: rgba(0,0,0,0.88);
    font-weight: 500;
    line-height: 22px;
  }
}
:deep(.column-time) {
  .cell{
    color: rgba(0,0,0,0.45);
    font-weight: 400;
    line-height: 22px;
  }
}

</style>